<template>
  <div>
    <ve-line :data="chartData" :data-empty="dataEmpty" :extend="extend" :settings="chartSettings"></ve-line>
  </div>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex'
import {
  selectProresult
} from '@/network/home'
import 'v-charts/lib/style.css'

export default {
  props: ["userId"],
  data () {
    this.chartSettings = {
      labelMap: {
        className: '科目',
        grade: '成绩'
      }
    }
    this.extend = {
      'xAxis.0.axisLabel.rotate': 0,
      series: {
        label: {
          normal: {
            show: true
          }
        }
      }
    }
    return {
      chartData: {
        columns: ['className', 'grade'],
        rows: []
      },
      dataEmpty: true
    }
  },
  computed: {
    ...mapGetters([
      'userinfo'
    ]),
  },
  created() {
    this.selectscore()
  },
  methods: {
    ...mapActions([
      'selectGrade'
    ]),
    selectscore() {
      // let userId = this.iceberguserInfo.user_Id ? this.iceberguserInfo.user_Id: this.userInfo.user_Id
      let userId = this.userId
      let params = {
        user_Id: userId
      }
      console.log(params)
      selectGrade(params)
        .then((data) => {
          if(data.data.scoreItem!=[]) {
            this.dataEmpty=false
            this.chartData.rows = data.data.scoreItem
          }
        })
        .catch((err) => {
          // this.$toast(err.msg, 'error')
        })
    },
  }
}
</script>